<template>
  <div class="app-container">
    <div class="table-wrapper">
      <el-table
          class="table-area"
          :data="listData"
          highlight-current-row
          border>

        <el-table-column label="用户名" width="160px">
          <template v-slot="scope">
            <span>{{scope.row.username}}</span>
          </template>
        </el-table-column>
        <el-table-column label="IP" width="160px">
          <template v-slot="scope">
            <span>{{scope.row.ip}}</span>
          </template>
        </el-table-column>
        <el-table-column label="IP来源" width="180px">
          <template v-slot="scope">
            <span>{{scope.row.ipAddress}}</span>
          </template>
        </el-table-column>
        <el-table-column label="描述" width="180px">
          <template v-slot="scope">
            <span>{{scope.row.description}}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户端">
          <template v-slot="scope">
            <el-button type="text">{{scope.row.client}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="请求耗时">
          <template v-slot="scope">
            <el-button type="text">{{scope.row.useTimes}}ms</el-button>
          </template>
        </el-table-column>
        <el-table-column label="创建日期">
          <template v-slot="scope">
            <el-button type="text">{{scope.row.createTime}}</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>


  </div>
</template>

<script src="./log.js"></script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/common.scss";

  .drone-form ::v-deep(.el-row) {
    .el-select, .el-input-number {
      width: 100%;
    }
  }

  .el-pagination {
    margin-bottom: 1rem;
    overflow-y: auto;
    ::v-deep(.el-pagination__jump) {
      margin-left: 0;
    }
  }

  .table-wrapper {
    height: calc(100vh - 138px) !important;
  }
  .table-area {
    height: 100%;
    overflow: auto;

    ::v-deep(.el-table__body-wrapper), ::v-deep(.el-table__header-wrapper) {
      width: max-content;
    }
  }
</style>
